<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>星座运程 - 多维度筛选</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f5f5;
            padding-bottom: 60px;
            color: #333;
        }
        
        /* 导航栏样式 */
        .top-nav {
            background: linear-gradient(135deg, #6b46c1, #805ad5);
            padding: 15px 16px;
            color: white;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            margin: 0;
        }
        
        /* 筛选区域容器 */
        .filter-container {
            background-color: white;
            border-bottom: 1px solid #f0f0f0;
            position: sticky;
            top: 57px; /* 顶部导航高度 */
            z-index: 99;
        }
        
        /* 搜索框 */
        .search-box {
            padding: 10px 16px;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 8px 16px 8px 38px;
            border-radius: 20px;
            border: 1px solid #eee;
            font-size: 14px;
            background-color: #f5f5f5;
        }
        
        .search-box i {
            position: absolute;
            left: 26px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        
        /* 星座筛选栏 */
        .zodiac-filter {
            padding: 12px 0;
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .zodiac-filter::-webkit-scrollbar {
            display: none;
        }
        
        .zodiac-list {
            display: flex;
            padding: 0 10px;
            gap: 15px;
            min-width: max-content;
        }
        
        .zodiac-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            opacity: 0.7;
            transition: all 0.2s;
        }
        
        .zodiac-item.active {
            opacity: 1;
        }
        
        .zodiac-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            font-size: 18px;
        }
        
        .zodiac-item.active .zodiac-icon {
            background: linear-gradient(135deg, #6b46c1, #805ad5);
            color: white;
        }
        
        .zodiac-name {
            font-size: 12px;
            font-weight: 500;
        }
        
        /* 高级筛选区域 */
        .advanced-filters {
            padding: 8px 16px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-group {
            flex: 1;
            min-width: 120px;
        }
        
        .filter-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
            display: block;
        }
        
        .filter-select {
            width: 100%;
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid #eee;
            font-size: 13px;
            background-color: white;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l4-4H4l4 4z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
        }
        
        /* 筛选结果提示 */
        .filter-result {
            padding: 10px 16px;
            font-size: 13px;
            color: #666;
            background-color: #f5f5f5;
            border-bottom: 1px solid #eee;
        }
        
        /* 运程卡片样式 */
        .horoscope-card {
            background-color: white;
            border-radius: 10px;
            margin: 12px 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        /* 卡片头部 */
        .card-header {
            padding: 15px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .header-info {
            display: flex;
            align-items: center;
        }
        
        .card-zodiac {
            display: flex;
            align-items: center;
            margin-right: 12px;
        }
        
        .card-zodiac-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 6px;
            font-size: 14px;
        }
        
        .card-zodiac-name {
            font-weight: 600;
            font-size: 15px;
        }
        
        .card-date {
            font-size: 12px;
            color: #999;
        }
        
        .lucky-score {
            display: flex;
            align-items: center;
            background-color: #f5f7ff;
            color: #6b46c1;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 500;
        }
        
        .lucky-score i {
            margin-right: 5px;
        }
        
        /* 卡片内容 */
        .card-content {
            padding: 15px 16px;
        }
        
        .horoscope-type {
            font-size: 14px;
            color: #6b46c1;
            font-weight: 500;
            margin-bottom: 8px;
            display: inline-block;
            background-color: #f5f7ff;
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        .horoscope-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        
        .horoscope-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }
        
        /* 运势指标 */
        .horoscope-metrics {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .metric-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }
        
        .metric-name {
            font-size: 11px;
            color: #999;
            margin-bottom: 5px;
        }
        
        .metric-value {
            font-size: 13px;
            font-weight: 600;
            color: #333;
        }
        
        .metric-bar-container {
            width: 90%;
            height: 6px;
            background-color: #f0f0f0;
            border-radius: 3px;
            margin-top: 5px;
            overflow: hidden;
        }
        
        .metric-bar {
            height: 100%;
            border-radius: 3px;
        }
        
        .love-bar {
            background-color: #ed64a6;
        }
        
        .career-bar {
            background-color: #38b2ac;
        }
        
        .wealth-bar {
            background-color: #ecc94b;
        }
        
        .health-bar {
            background-color: #48bb78;
        }
        
        /* 图片容器 */
        .horoscope-images {
            margin-bottom: 10px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        /* 无图样式 */
        .no-image .card-content {
            padding-bottom: 20px;
        }
        
        /* 单图样式 */
        .single-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 多图样式 */
        .multi-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
        }
        
        .multi-images img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            display: block;
        }
        
        /* 幸运提示 */
        .lucky-hint {
            background-color: #f8f5ff;
            border-left: 3px solid #6b46c1;
            padding: 10px 12px;
            border-radius: 0 4px 4px 0;
            margin-top: 10px;
        }
        
        .hint-title {
            font-size: 13px;
            font-weight: 600;
            color: #6b46c1;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }
        
        .hint-title i {
            margin-right: 5px;
            font-size: 14px;
        }
        
        .hint-content {
            font-size: 13px;
            color: #666;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .hint-tag {
            background-color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        /* 卡片底部操作 */
        .card-actions {
            padding: 10px 16px;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #f5f5f5;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            color: #999;
            text-decoration: none;
            font-size: 13px;
        }
        
        .action-btn i {
            margin-right: 5px;
            font-size: 15px;
        }
        
        .action-btn:hover {
            color: #6b46c1;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            text-decoration: none;
            font-size: 10px;
        }
        
        .nav-item.active {
            color: #6b46c1;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        /* 空状态和加载状态 */
        .empty-state, .loading-state {
            padding: 60px 20px;
            text-align: center;
            color: #999;
        }
        
        .empty-state i, .loading-state i {
            font-size: 50px;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        
        .loading-state i {
            animation: spin 1.5s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav d-flex justify-content-between align-items-center">
        <button class="btn btn-link p-0 text-white">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="page-title">星座运程</h1>
        <button class="btn btn-link p-0 text-white">
            <i class="fas fa-star"></i>
        </button>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-container">
        <!-- 搜索框 -->
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索星座、幸运色、关键词..." id="search-input">
        </div>
        
        <!-- 星座筛选栏 -->
        <div class="zodiac-filter">
            <div class="zodiac-list">
                <div class="zodiac-item active" data-zodiac="all">
                    <div class="zodiac-icon">
                        <i class="fas fa-globe"></i>
                    </div>
                    <span class="zodiac-name">全部</span>
                </div>
                <div class="zodiac-item" data-zodiac="aquarius">
                    <div class="zodiac-icon">
                        <i class="fas fa-aquarius"></i>
                    </div>
                    <span class="zodiac-name">水瓶座</span>
                </div>
                <div class="zodiac-item" data-zodiac="pisces">
                    <div class="zodiac-icon">
                        <i class="fas fa-pisces"></i>
                    </div>
                    <span class="zodiac-name">双鱼座</span>
                </div>
                <div class="zodiac-item" data-zodiac="aries">
                    <div class="zodiac-icon">
                        <i class="fas fa-aries"></i>
                    </div>
                    <span class="zodiac-name">白羊座</span>
                </div>
                <div class="zodiac-item" data-zodiac="taurus">
                    <div class="zodiac-icon">
                        <i class="fas fa-taurus"></i>
                    </div>
                    <span class="zodiac-name">金牛座</span>
                </div>
                <div class="zodiac-item" data-zodiac="gemini">
                    <div class="zodiac-icon">
                        <i class="fas fa-gemini"></i>
                    </div>
                    <span class="zodiac-name">双子座</span>
                </div>
                <div class="zodiac-item" data-zodiac="cancer">
                    <div class="zodiac-icon">
                        <i class="fas fa-cancer"></i>
                    </div>
                    <span class="zodiac-name">巨蟹座</span>
                </div>
                <div class="zodiac-item" data-zodiac="leo">
                    <div class="zodiac-icon">
                        <i class="fas fa-leo"></i>
                    </div>
                    <span class="zodiac-name">狮子座</span>
                </div>
                <div class="zodiac-item" data-zodiac="virgo">
                    <div class="zodiac-icon">
                        <i class="fas fa-virgo"></i>
                    </div>
                    <span class="zodiac-name">处女座</span>
                </div>
                <div class="zodiac-item" data-zodiac="libra">
                    <div class="zodiac-icon">
                        <i class="fas fa-libra"></i>
                    </div>
                    <span class="zodiac-name">天秤座</span>
                </div>
                <div class="zodiac-item" data-zodiac="scorpio">
                    <div class="zodiac-icon">
                        <i class="fas fa-scorpio"></i>
                    </div>
                    <span class="zodiac-name">天蝎座</span>
                </div>
                <div class="zodiac-item" data-zodiac="sagittarius">
                    <div class="zodiac-icon">
                        <i class="fas fa-sagittarius"></i>
                    </div>
                    <span class="zodiac-name">射手座</span>
                </div>
                <div class="zodiac-item" data-zodiac="capricorn">
                    <div class="zodiac-icon">
                        <i class="fas fa-capricorn"></i>
                    </div>
                    <span class="zodiac-name">摩羯座</span>
                </div>
            </div>
        </div>
        
        <!-- 高级筛选 -->
        <div class="advanced-filters">
            <div class="filter-group">
                <label class="filter-label">时间范围</label>
                <select class="filter-select" id="time-filter">
                    <option value="all">全部时间</option>
                    <option value="today" selected>今日</option>
                    <option value="tomorrow">明日</option>
                    <option value="week">本周</option>
                    <option value="month">本月</option>
                    <option value="year">全年</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">运势类型</label>
                <select class="filter-select" id="type-filter">
                    <option value="all">全部类型</option>
                    <option value="comprehensive">综合运势</option>
                    <option value="love">爱情运势</option>
                    <option value="career">事业运势</option>
                    <option value="wealth">财运运势</option>
                    <option value="health">健康运势</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">排序方式</label>
                <select class="filter-select" id="sort-filter">
                    <option value="latest" selected>最新发布</option>
                    <option value="lucky-high">幸运指数从高到低</option>
                    <option value="lucky-low">幸运指数从低到高</option>
                    <option value="popular">热门优先</option>
                </select>
            </div>
        </div>
    </div>
    
    <!-- 筛选结果提示 -->
    <div class="filter-result" id="filter-result">
        显示全部星座运程（共 12 条）
    </div>
    
    <!-- 星座运程列表 -->
    <div class="horoscope-list" id="horoscope-container">
        <!-- 1. 水瓶座综合运势（单图） -->
        <div class="horoscope-card" data-zodiac="aquarius" data-time="today" data-type="comprehensive" data-lucky="85" data-popular="89">
            <div class="card-header">
                <div class="header-info">
                    <div class="card-zodiac">
                        <div class="card-zodiac-icon">
                            <i class="fas fa-aquarius"></i>
                        </div>
                        <span class="card-zodiac-name">水瓶座</span>
                    </div>
                    <div class="card-date">2023年6月15日</div>
                </div>
                <div class="lucky-score">
                    <i class="fas fa-star"></i>
                    <span>幸运指数 85</span>
                </div>
            </div>
            
            <div class="card-content">
                <span class="horoscope-type">综合运势</span>
                <h3 class="horoscope-title">水瓶座今日运势上升，适合拓展社交圈</h3>
                <p class="horoscope-desc">今天水瓶座的整体运势呈现上升趋势，尤其是在人际交往方面会有不错的机遇。工作上容易得到同事的帮助，合作项目进展顺利。感情方面，单身者有机会遇到心仪对象，已有伴侣的人感情更加稳定。</p>
                
                <div class="horoscope-images">
                    <div class="single-image">
                        <img src="https://picsum.photos/id/1025/800/400" alt="水瓶座今日运势">
                    </div>
                </div>
                
                <div class="horoscope-metrics">
                    <div class="metric-item">
                        <span class="metric-name">爱情</span>
                        <span class="metric-value">90</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar love-bar" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">事业</span>
                        <span class="metric-value">80</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 80%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">财运</span>
                        <span class="metric-value">75</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar wealth-bar" style="width: 75%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">健康</span>
                        <span class="metric-value">85</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar health-bar" style="width: 85%"></div>
                        </div>
                    </div>
                </div>
                
                <div class="lucky-hint">
                    <div class="hint-title">
                        <i class="fas fa-lightbulb"></i> 幸运提示
                    </div>
                    <div class="hint-content">
                        <span class="hint-tag">幸运色：紫色</span>
                        <span class="hint-tag">幸运数字：7</span>
                        <span class="hint-tag">幸运方位：西北方</span>
                        <span class="hint-tag">今日适合：社交活动</span>
                    </div>
                </div>
            </div>
            
            <div class="card-actions">
                <a href="#" class="action-btn">
                    <i class="far fa-heart"></i>
                    <span>收藏</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-comment"></i>
                    <span>评论 (32)</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </a>
            </div>
        </div>
        
        <!-- 2. 双鱼座爱情运势（多图） -->
        <div class="horoscope-card" data-zodiac="pisces" data-time="today" data-type="love" data-lucky="78" data-popular="92">
            <div class="card-header">
                <div class="header-info">
                    <div class="card-zodiac">
                        <div class="card-zodiac-icon">
                            <i class="fas fa-pisces"></i>
                        </div>
                        <span class="card-zodiac-name">双鱼座</span>
                    </div>
                    <div class="card-date">2023年6月15日</div>
                </div>
                <div class="lucky-score">
                    <i class="fas fa-star"></i>
                    <span>幸运指数 78</span>
                </div>
            </div>
            
            <div class="card-content">
                <span class="horoscope-type">爱情运势</span>
                <h3 class="horoscope-title">双鱼座今日感情丰富，容易遇到浪漫机遇</h3>
                <p class="horoscope-desc">双鱼座今天在感情方面会有较多的想法和感受，情绪波动较大。对于有伴侣的人来说，今天是增进感情的好时机，可以安排一次浪漫的约会。单身的双鱼座可能会在社交场合中遇到让自己心动的人。</p>
                
                <div class="horoscope-images">
                    <div class="multi-images">
                        <img src="https://picsum.photos/id/1062/300/300" alt="浪漫场景1">
                        <img src="https://picsum.photos/id/1068/300/300" alt="浪漫场景2">
                        <img src="https://picsum.photos/id/1083/300/300" alt="浪漫场景3">
                    </div>
                </div>
                
                <div class="lucky-hint">
                    <div class="hint-title">
                        <i class="fas fa-heart"></i> 爱情提示
                    </div>
                    <div class="hint-content">
                        <span class="hint-tag">适合约会地点：咖啡馆</span>
                        <span class="hint-tag">幸运饰品：珍珠项链</span>
                        <span class="hint-tag">爱情箴言：真诚表达感受</span>
                    </div>
                </div>
            </div>
            
            <div class="card-actions">
                <a href="#" class="action-btn">
                    <i class="far fa-heart"></i>
                    <span>收藏</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-comment"></i>
                    <span>评论 (25)</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </a>
            </div>
        </div>
        
        <!-- 3. 白羊座事业运势（无图） -->
        <div class="horoscope-card no-image" data-zodiac="aries" data-time="today" data-type="career" data-lucky="65" data-popular="76">
            <div class="card-header">
                <div class="header-info">
                    <div class="card-zodiac">
                        <div class="card-zodiac-icon">
                            <i class="fas fa-aries"></i>
                        </div>
                        <span class="card-zodiac-name">白羊座</span>
                    </div>
                    <div class="card-date">2023年6月15日</div>
                </div>
                <div class="lucky-score">
                    <i class="fas fa-star"></i>
                    <span>幸运指数 65</span>
                </div>
            </div>
            
            <div class="card-content">
                <span class="horoscope-type">事业运势</span>
                <h3 class="horoscope-title">白羊座今日工作需谨慎，避免冲动决策</h3>
                <p class="horoscope-desc">今天白羊座在工作中容易遇到一些挑战和压力，需要保持耐心和冷静。在决策时要多听取他人意见，避免因冲动而做出错误判断。团队合作中要注意沟通方式，避免发生冲突。下午时段效率较高，可以安排重要任务。</p>
                
                <div class="horoscope-metrics">
                    <div class="metric-item">
                        <span class="metric-name">效率</span>
                        <span class="metric-value">60</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 60%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">合作</span>
                        <span class="metric-value">70</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 70%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">机遇</span>
                        <span class="metric-value">55</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 55%"></div>
                        </div>
                    </div>
                    <div class="metric-item">
                        <span class="metric-name">压力</span>
                        <span class="metric-value">80</span>
                        <div class="metric-bar-container">
                            <div class="metric-bar career-bar" style="width: 80%"></div>
                        </div>
                    </div>
                </div>
                
                <div class="lucky-hint">
                    <div class="hint-title">
                        <i class="fas fa-briefcase"></i> 职场提示
                    </div>
                    <div class="hint-content">
                        <span class="hint-tag">适合任务：数据分析</span>
                        <span class="hint-tag">避免：重要谈判</span>
                        <span class="hint-tag">贵人星座：金牛座</span>
                    </div>
                </div>
            </div>
            
            <div class="card-actions">
                <a href="#" class="action-btn">
                    <i class="far fa-heart"></i>
                    <span>收藏</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-comment"></i>
                    <span>评论 (18)</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </a>
            </div>
        </div>
        
        <!-- 4. 金牛座财运运势（单图） -->
        <div class="horoscope-card" data-zodiac="taurus" data-time="today" data-type="wealth" data-lucky="92" data-popular="95">
            <div class="card-header">
                <div class="header-info">
                    <div class="card-zodiac">
                        <div class="card-zodiac-icon">
                            <i class="fas fa-taurus"></i>
                        </div>
                        <span class="card-zodiac-name">金牛座</span>
                    </div>
                    <div class="card-date">2023年6月15日</div>
                </div>
                <div class="lucky-score">
                    <i class="fas fa-star"></i>
                    <span>幸运指数 92</span>
                </div>
            </div>
            
            <div class="card-content">
                <span class="horoscope-type">财运运势</span>
                <h3 class="horoscope-title">金牛座今日财运旺盛，投资需把握时机</h3>
                <p class="horoscope-desc">今天金牛座的财运非常不错，正财收入稳定，还有可能获得意外之财。投资方面可以适当出手，但要避免贪心，见好就收。消费时要保持理性，不要因为一时冲动而购买不必要的物品。理财规划会有新思路，可以整理一下自己的财务状况。</p>
                
                <div class="horoscope-images">
                    <div class="single-image">
                        <img src="https://picsum.photos/id/1043/800/400" alt="金牛座财运">
                    </div>
                </div>
                
                <div class="lucky-hint">
                    <div class="hint-title">
                        <i class="fas fa-coins"></i> 财富提示
                    </div>
                    <div class="hint-content">
                        <span class="hint-tag">财运方向：正南方</span>
                        <span class="hint-tag">适合投资：稳健型产品</span>
                        <span class="hint-tag">注意：避免冲动消费</span>
                    </div>
                </div>
            </div>
            
            <div class="card-actions">
                <a href="#" class="action-btn">
                    <i class="far fa-heart"></i>
                    <span>收藏</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-comment"></i>
                    <span>评论 (42)</span>
                </a>
                <a href="#" class="action-btn">
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                </a>
            </div>
        </div>
    </div>
    
    <!-- 空状态（默认隐藏） -->
    <div class="empty-state" id="empty-state" style="display: none;">
        <i class="fas fa-search"></i>
        <h5>未找到相关运势</h5>
        <p>尝试调整筛选条件或搜索关键词</p>
    </div>
    
    <!-- 加载状态（默认隐藏） -->
    <div class="loading-state" id="loading-state" style="display: none;">
        <i class="fas fa-circle-notch"></i>
        <p>正在加载运势...</p>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-star"></i>
            <span>星座</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const zodiacItems = document.querySelectorAll('.zodiac-item');
            const timeFilter = document.getElementById('time-filter');
            const typeFilter = document.getElementById('type-filter');
            const sortFilter = document.getElementById('sort-filter');
            const searchInput = document.getElementById('search-input');
            const horoscopeContainer = document.getElementById('horoscope-container');
            const horoscopeCards = document.querySelectorAll('.horoscope-card');
            const emptyState = document.getElementById('empty-state');
            const loadingState = document.getElementById('loading-state');
            const filterResult = document.getElementById('filter-result');
            
            // 存储当前筛选条件
            let currentFilters = {
                zodiac: 'all',
                time: 'today',
                type: 'all',
                sort: 'latest',
                search: ''
            };
            
            // 执行筛选
            function applyFilters() {
                // 显示加载状态
                showLoading();
                
                // 模拟加载延迟
                setTimeout(() => {
                    let visibleCount = 0;
                    const searchTerm = currentFilters.search.toLowerCase();
                    
                    // 筛选星座运程
                    horoscopeCards.forEach(card => {
                        const zodiac = card.dataset.zodiac;
                        const time = card.dataset.time;
                        const type = card.dataset.type;
                        const title = card.querySelector('.horoscope-title').textContent.toLowerCase();
                        const desc = card.querySelector('.horoscope-desc').textContent.toLowerCase();
                        const tags = Array.from(card.querySelectorAll('.hint-tag')).map(tag => tag.textContent.toLowerCase()).join(' ');
                        
                        // 检查是否符合所有筛选条件
                        const zodiacMatch = currentFilters.zodiac === 'all' || zodiac === currentFilters.zodiac;
                        const timeMatch = currentFilters.time === 'all' || time === currentFilters.time;
                        const typeMatch = currentFilters.type === 'all' || type === currentFilters.type;
                        const searchMatch = searchTerm === '' || 
                                           title.includes(searchTerm) || 
                                           desc.includes(searchTerm) || 
                                           tags.includes(searchTerm);
                        
                        // 应用筛选
                        if (zodiacMatch && timeMatch && typeMatch && searchMatch) {
                            card.style.display = 'block';
                            visibleCount++;
                        } else {
                            card.style.display = 'none';
                        }
                    });
                    
                    // 排序结果
                    sortResults();
                    
                    // 更新结果计数
                    updateResultCount(visibleCount);
                    
                    // 显示空状态或隐藏
                    if (visibleCount === 0) {
                        showEmptyState();
                    } else {
                        hideEmptyState();
                    }
                    
                    // 隐藏加载状态
                    hideLoading();
                }, 500);
            }
            
            // 排序结果
            function sortResults() {
                const visibleCards = Array.from(horoscopeCards).filter(card => card.style.display !== 'none');
                
                if (visibleCards.length <= 1) return;
                
                // 根据当前排序条件排序
                switch(currentFilters.sort) {
                    case 'lucky-high':
                        visibleCards.sort((a, b) => b.dataset.lucky - a.dataset.lucky);
                        break;
                    case 'lucky-low':
                        visibleCards.sort((a, b) => a.dataset.lucky - b.dataset.lucky);
                        break;
                    case 'popular':
                        visibleCards.sort((a, b) => b.dataset.popular - a.dataset.popular);
                        break;
                    case 'latest':
                    default:
                        // 默认按DOM顺序排列（最新发布）
                        break;
                }
                
                // 重新排列DOM
                visibleCards.forEach(card => {
                    horoscopeContainer.appendChild(card);
                });
            }
            
            // 更新结果计数
            function updateResultCount(count) {
                let resultText = '显示 ';
                
                // 构建筛选描述文本
                if (currentFilters.zodiac !== 'all') {
                    const zodiacName = Array.from(zodiacItems).find(item => item.dataset.zodiac === currentFilters.zodiac).querySelector('.zodiac-name').textContent;
                    resultText += `${zodiacName} `;
                }
                
                if (currentFilters.time !== 'all') {
                    const timeText = timeFilter.options[timeFilter.selectedIndex].text;
                    resultText += `${timeText} `;
                }
                
                if (currentFilters.type !== 'all') {
                    const typeText = typeFilter.options[typeFilter.selectedIndex].text;
                    resultText += `${typeText} `;
                }
                
                if (currentFilters.search) {
                    resultText += `包含"${currentFilters.search}" `;
                }
                
                resultText += `运势（共 ${count} 条）`;
                filterResult.textContent = resultText;
            }
            
            // 显示/隐藏加载状态
            function showLoading() {
                loadingState.style.display = 'block';
                horoscopeContainer.style.display = 'none';
                emptyState.style.display = 'none';
            }
            
            function hideLoading() {
                loadingState.style.display = 'none';
                horoscopeContainer.style.display = 'block';
            }
            
            // 显示/隐藏空状态
            function showEmptyState() {
                emptyState.style.display = 'block';
                horoscopeContainer.style.display = 'none';
            }
            
            function hideEmptyState() {
                emptyState.style.display = 'none';
                horoscopeContainer.style.display = 'block';
            }
            
            // 星座筛选交互
            zodiacItems.forEach(item => {
                item.addEventListener('click', function() {
                    zodiacItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    currentFilters.zodiac = this.dataset.zodiac;
                    applyFilters();
                });
            });
            
            // 时间筛选交互
            timeFilter.addEventListener('change', function() {
                currentFilters.time = this.value;
                applyFilters();
            });
            
            // 运势类型筛选交互
            typeFilter.addEventListener('change', function() {
                currentFilters.type = this.value;
                applyFilters();
            });
            
            // 排序方式筛选交互
            sortFilter.addEventListener('change', function() {
                currentFilters.sort = this.value;
                applyFilters();
            });
            
            // 搜索框交互
            searchInput.addEventListener('input', function() {
                currentFilters.search = this.value.trim();
                applyFilters();
            });
            
            // 收藏按钮交互
            document.querySelectorAll('.action-btn .fa-heart').forEach(icon => {
                const btn = icon.closest('.action-btn');
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.style.color = '#e53e3e';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.style.color = '';
                    }
                });
            });
            
            // 评论和分享按钮交互
            document.querySelectorAll('.action-btn:not(:first-child)').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    this.style.color = '#6b46c1';
                    setTimeout(() => {
                        this.style.color = '';
                    }, 300);
                });
            });
            
            // 初始化页面
            applyFilters();
        });
    </script>
</body>
</html>

